<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <base href="<%=request.getContextPath()+"/"%>">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-3.6.1.js"></script>
    <script type="text/javascript">
        $(function () {
            var usernameFlag = true;
            $("#name").blur(function () {
                var name = $(this).val();
                $.ajax({
                    url: "http://localhost:8080/Student?action=checkName&name=" + name,
                    type: "GET",
                    dataType: "JSON", // 服务端返回的数据是JSON会自动转换
                    success: function (data) {
                        if (data.code == 100) {
                            usernameFlag = false;
                        } else {
                            usernameFlag = true;
                        }
                        $("#nameMsg").text(data.msg);
                    }
                });
            });

            $("#studentForm").submit(function () {
                if (!usernameFlag) {
                    alert("表单验证未通过");
                }
                return usernameFlag;
            });
        })
    </script>
</head>
<body>
<h3>添加学生</h3>

<form id="studentForm" method="post" action="http://localhost:8080/Student?action=add">
    <table border="1">
        <tr>
            <td> 姓名:</td>
            <td>
                <!--给输入框绑定一个失去焦点事件,触发的同事把用户输入的内容传递过去 -->
                <input type="text" id="name" name="name" value="toString">
                <font color="red" id="nameMsg"></font>
            </td>
        </tr>

        <tr>
            <td> 年龄:</td>
            <td>
                <input type="text" name="age" value="22">
            </td>
        </tr>

        <tr>
            <td> 性别:</td>
            <td>
                <input type="radio" name="sex" value="1" checked>男
                <input type="radio" name="sex" value="0">女
            </td>
        </tr>

        <tr>
            <td> 手机号:</td>
            <td>
                <input type="text" name="phone" value="10086">
            </td>
        </tr>

        <tr>
            <td> 邮箱:</td>
            <td>
                <input type="text" name="email" value="toString@qq.com">
            </td>
        </tr>

        <tr>
            <td> 爱好:</td>
            <td>
                <!-- 1:book:2:code-->
                <input type="checkbox" name="loves" value="book" checked>看书
                <input type="checkbox" name="loves" value="study">学习
                <input type="checkbox" name="loves" value="code">编程
            </td>
        </tr>

        <tr>
            <td> 课程:</td>
            <td>
                <select name="course">
                    <option value="Java">Java实战</option>
                    <option value="c++">C++入门</option>
                    <option value="c#">C#xxxxx</option>
                    <option value="Pyton">Python权威指南</option>
                </select>
            </td>
        </tr>

        <tr>
            <td colspan="2">
                <input type="submit" value="添加">
                <input type="reset" value="重置">
            </td>
        </tr>
    </table>
</form>
</body>
</html>
